<template>
  <div class="login">
    <header>
      <van-nav-bar title="嗨购登录" left-arrow @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </header>

    <main>
      <van-cell-group border>
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
          clearable
        />
      </van-cell-group>
      <van-cell-group border>
        <van-field v-model="password" clearable :type="flag?'password':'text'" :right-icon="flag?'closed-eye':'eye-o'" label="密码" placeholder="请输入密码"  @click-right-icon="flag=!flag"/>
      </van-cell-group>
      <div class="loginbtn">
        <van-button class="btn" type="danger" @click="login" round block>登录</van-button>
        <van-button type="danger" to="/register" round block>没有账户/去注册</van-button>
      </div>
    </main>
  </div>
</template>

<script>
import {dologin} from "../api/user"
import Vue from "vue";
import { Field, Cell, CellGroup, Button ,Toast} from "vant";

Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);
export default {
  data() {
    return {
      tel: "",
      password: "",
      flag:true,
    };
  },
  methods:{
    login(){
      dologin({loginname:this.tel,password:this.password}).then(res=>{
        console.log(res);
        switch (res.data.code) {
          case '10010':
            Toast("该用户不存在，请先注册")
            break;
          case '10011':
            Toast("密码错误，请重新输入")
            break;
          case '200':
            localStorage.setItem("token",res.data.data.token)
            localStorage.setItem("userid",res.data.data.userid)
            this.$router.push("/home")
            break;       
          default:
            break;
        }
      })
    }
  }
};
</script>

<style scoped>
.loginbtn {
  width: 80%;
  margin: 0.1rem auto;
}
.btn{
    margin: .1rem auto;
}
</style>